<template>
  <el-dialog
    :title="isPass ? '通过审批' : '驳回审批'"
    width="max-content"
    class="el-dialog-box"
    :visible.sync="dialogVisible"
  >
    <div class="edit-label-content">
      <div class="container">
        <el-form
          :inline="true"
          :model="form"
          :rules="rules"
          ref="myForm"
          class="demo-form-inline"
        >
          <el-form-item v-if="isPass" label="通行证有效期：" prop="timer">
            <el-date-picker
              size="small"
              v-model="timer"
              type="daterange"
              :range-separator="$t('date.tip')"
              value-format="yyyy-MM-dd HH:mm:ss"
              :start-placeholder="$t('text.startTime')"
              :end-placeholder="$t('date.end')"
              :default-time="['00:00:00', '23:59:59']"
              @change="createTimeChange"
            ></el-date-picker>
          </el-form-item>
          <el-form-item v-else label="驳回原因：" prop="remark">
            <el-input
              v-model="form.remark"
              class="remarks"
              type="textarea"
              placeholder="请输入驳回原因"
            />
          </el-form-item>
        </el-form>
      </div>
    </div>
    <!-- 按键 -->
    <span slot="footer" class="dialog-footer">
      <div class="default-btn" @click="dialogVisible = false">
        {{ $t("remindPop.cancel") }}
      </div>
      <div :class="['default-btn primary-btn']" @click="confirmPass">
        {{ $t("group.confirmReview") }}
      </div>
    </span>
  </el-dialog>
</template>

<script>
export default {
  data() {
    let validateTimer = (rule, value, callback) => {
      if (this.isPass && (!this.form.startTime || !this.form.endTime)) {
        callback(new Error("请选择有效日期"));
      } else {
        callback();
      }
    };
    let validateRemark = (rule, value, callback) => {
      if (!this.isPass && !this.form.remark) {
        callback(new Error("请输入驳回理由"));
      } else {
        callback();
      }
    };
    return {
      id: "",
      isPass: true,
      dialogVisible: false,
      timer: null,
      form: {},
      rules: {
        timer: [
          { required: true, validator: validateTimer, trigger: "change" },
        ],
        remark: [
          { required: true, validator: validateRemark, trigger: "blur" },
        ],
      },
    };
  },
  mounted() {},
  methods: {
    open(id, isPass) {
      this.id = id;
      this.isPass = isPass;
      this.form = {
        timer: "",
        remark: "",
      };
      this.timer = "";
      this.dialogVisible = true;
      this.$nextTick(() => {
        this.$refs.myForm.clearValidate();
      })
    },
    confirmPass() {
      this.$refs.myForm.validate((valid) => {
        if (valid) {
          let parmas = {
            id: this.id,
            auditFlag: this.isPass,
            startTime: this.form.startTime,
            endTime: this.form.endTime,
            remark: this.form.remark,
          };
          if(!this.isPass){
            delete parmas.startTime
            delete parmas.endTime
          }
          this.$http({
            url: this.$http.adornUrl("/platform/rider/audit"),
            method: "put",
            data: parmas,
          }).then(({ code }) => {
            if (code == "00000") {
              this.dialogVisible = false;
              this.$message({
                type: "success",
                message: "操作成功",
              });
              this.$emit("refresh");
            }
            this.$refs.myForm.resetFields();
          }).catch((err)=>{
            this.$refs.myForm.resetFields();
          })
        }
      });
    },
    createTimeChange() {
      // 处理 searchForm 和 endTime
      if (!this.timer || this.timer.length === 0) {
        delete this.form.startTime;
        delete this.form.endTime;
      } else {
        this.form.startTime = this.timer[0];
        this.form.endTime = this.timer[1];
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  font-size: 14px;
  box-sizing: border-box;
  padding: 20px 50px;
}

.remarks ::v-deep textarea {
  height: 160px;
  width: 500px;
  resize: none;
}
</style>
